<template>
	<view class="container">
		<u-sticky class="banner-container mb-5" bgColor="#ffffff">
			<u--image v-if="configs.index.bannerLeft" class="banner banner-left" :src="configs.index.bannerLeft" :fade="true"
				mode="scaleToFill" duration="450" width="50vw" height="17vw">
				<template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				</template>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
			<u--image v-if="configs.index.bannerRight" class="banner banner-right" :src="configs.index.bannerRight" :fade="true"
				mode="scaleToFill" duration="450" width="50vw" height="17vw" @click="goIndexHot">
				<template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				</template>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
			<u--image v-if="configs.index.seeMore" class="see-more" :src="configs.index.seeMore" :fade="true"
				mode="widthFix" duration="450" width="25vw" height="10vw" @click="goIndexHot">
				<template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				</template>
			</u--image>
		</u-sticky>
		<view class="main">
			<list-game :games="games"></list-game>
		</view>
		
		<u-modal :show="dialogKefuShow" title="联系客服" :confirmText="dialogKefuConfirmText" closeOnClickOverlay
			@close="dialogKefuShow = false" @confirm="downloadKefuImage">
			<view class="slot-content">
				<u--image v-if="configs.index.kefu" :src="configs.index.kefu" :fade="true" mode="widthFix"
					duration="450" width="90vw" height="60vh">
					<template v-slot:loading>
						<u-loading-icon></u-loading-icon>
					</template>
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
			</view>
		</u-modal>

		<view class="course-container" v-if="dialogCourseIosShow">
			<u--image src="https://001hezi.oss-cn-beijing.aliyuncs.com/game-list/images/ios-install.png" :fade="true" mode="widthFix"
				duration="450" width="100vw" height="210vw">
				<template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				</template>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
		</view>
	</view>

</template>

<script>
	import ListGame from "@/components/list-game.vue";
	
	export default {
		components: {
			ListGame,
		},
		data() {
			return {
				games: [],
				loading: "nomore",
				dialogKefuShow: false,
				dialogCourseIosShow: false,
				// #ifdef APP-PLUS
				dialogKefuConfirmText: "保存二维码到本地",
				// #endif
				// #ifdef H5
				dialogKefuConfirmText: "截图保存二维码",
				// #endif
			}
		},
		computed: {
			configs() {
				return this.$store.state.app.configs;
			},
		},
		watch: {
			configs(val) {
				console.log(val);
				if (val.navbar) this.setNavbar(val.navbar);
			},
		},
		methods: {
			getGames() {
				uni.showLoading();
				this.$store.dispatch("app/GetGameList").then(({data}) => {
					this.games = data;
				}).finally(() => {
					uni.hideLoading();
				});
			},
			initData() {
				this.showCourseIos();
				this.getGames();
			},
			setNavbar(navbar) {
				if (navbar.title) {
					uni.setNavigationBarTitle({
						title: navbar.title,
					})
				}
				if (navbar.background) {
					uni.setNavigationBarColor({
						backgroundColor: navbar.background,
						frontColor: navbar.color,
					})
				}
			},
			goIndexHot() {
				uni.navigateTo({
					url: "/pages/index/index-hot",
				})
			},
			downloadKefuImage() {
				uni.downloadFile({
					url: this.configs.index.kefu, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode !== 200) {
							uni.showToast({
								title: '图片保存失败',
								icon: "cancel",
								duration: 2000
							});
							return
						}
						// #ifdef APP-ANDROID
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '图片保存成功',
									duration: 2000
								});
							},
							fail(e) {
								uni.showToast({
									title: '图片保存失败(1)',
									icon: "cancel",
									duration: 2000
								});
							}
						});
						// #endif
						this.dialogKefuShow = false;
					}
				});
			},
			showCourseIos() {
				// #ifdef H5
				if (!this.$helper.isDevelopment() && this.$helper.is_apple()) {
					if (("standalone" in window.navigator) && window.navigator.standalone) {
						this.dialogCourseIosShow = false;
					} else {
						this.dialogCourseIosShow = true;
					}
				}
				// #endif
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				// 客服
				this.dialogKefuShow = true;
			} else {
				uni.navigateTo({
					url: "download",
				})
			}
			console.log(e);
			// e的返回格式为json对象：{"text":"测试","index":0}
		},
		// onPullDownRefresh() {
		// 	this.initData();
		// },
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// 	console.log(this.scrollTop)
		// },
		created() {
			this.initData();

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding-top: 10px;
		// background: white;
		// padding: 10px;
		// box-shadow: 0 0 10px #9a9999;
		// font-size: 14px;
		// line-height: 24px;
		.banner-container{
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
			background: white;
		}
		.banner {
			display: inline-block;
		}
		.banner-right {
			box-shadow: -2px -1px 0px 0px #f1ecec;
		}

		.see-more {
			position: absolute;
			top: 9vw;
			right: 0;
		}
		
		.btn-hotgame {
			position: absolute;
			top: 6vw;
			right: 2vw;
			/* height: 17vw; */
			/* line-height: 17vw; */
			color: #3c9cff;
			border-bottom: 1px solid #3c9cff;
		}
	}

	.main {
		width: calc(100vw - 20px);
		padding: 0 10px;
		overflow-x: hidden;
	}
	.course-container {
		width: 100vw;
		height: 100%;
		overflow-y: scroll;

		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #000000c9;
		// img {
		// 	min-height: 100vh;
		// }
	}
</style>